<template>
  <div v-show="dialogVisible" class="wishBody">
    <!-- 遮罩层 -->
    <div class="mask">
      <div class="wish" width="40vw">
        <!-- 主体内容 -->
        <div class="main">
          <div class="left">
            <p class="title">{{ title }}</p>
            <span class="time">{{ time }}</span>
            <p class="nickname">您好!<span>{{ nickName }}:</span></p>
            <div class="content">{{ content }}</div>
            <div style="position:absolute;top:-20px;right:20px;"><img style="width: 80px;height: 100px;"
                src="./img/庆祝氛围.png" alt=""></div>
          </div>
          <div class="right">
            <img :src="imgs" :alt="title">
          </div>
        </div>
        <!-- 关闭按钮 -->
        <div class="cancel" @click="wishClick"><i class="el-icon-close" style="font-size: 30px;line-height: 40px;"></i></div>

        <!-- 装饰 -->
        <div class="wishPng" style="top:-20px;right:20px;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="top:-20px;left:40px;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="bottom:10px;right:20px;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="bottom:10px;left:-10px;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="top:-20px;right:20px; rotate(100deg)"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="bottom:20%;right:50%;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="bottom:10%;right:40%;"><img src="./img/庆祝氛围.png" alt=""></div>
        <div class="wishPng" style="bottom:50%;right:20;"><img src="./img/庆祝氛围.png" alt=""></div>
        
        <div class="wishPng" style="bottom:80%;right:50%;"><img src="./img/彩带-01.png" alt=""></div>
        <div class="wishPng" style="top:60%;right:40%;"><img src="./img/彩带-01.png" alt=""></div>
        <div class="wishPng" style="bottom:50%;right:70%; rotate(100deg)"><img src="./img/彩带-01.png" alt=""></div>
        <div class="wishPng" style="bottom:40%;right:90%;"><img src="./img/彩带-01.png" alt=""></div>

        <div class="wishPng" style="top:30%;right:96%;"><img src="./img/彩带.png" alt=""></div>
        <div class="wishPng" style="top:98%;right:60%;"><img src="./img/彩带.png" alt=""></div>
        <div class="wishPng" style="bottom:100%;right:90%; transform: rotate(100deg);"><img src="./img/彩带.png" alt="">
        </div>
        <div class="wishPng" style="bottom:92%;right:40%;transform: rotate(80deg);"><img src="./img/彩带.png" alt=""></div>
        <div class="wishPng" style="bottom:95%;right:10%;"><img src="./img/彩带.png" alt=""></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';

// 定义props
const props = defineProps({
  title: {
    type: String,
    default: '祝福您!'
  },
  content: {
    type: String,
    default: '希望您每天都快乐',
  },
  imgs: {
    type: String,
    default: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
  },
  time: {
    type: String,
    default: () => {
      const date = new Date();
      let year = date.getFullYear(); //获取完整的年份(4位)
      let mon = date.getMonth(); //获取当前月份(0-11,0代表1月)
      let day = date.getDate(); //获取当前日(1-31)
      return year + '.' + (++mon) + '.' + day
    },
  },
  nickName: {
    type: String,
    default: '张三'
  },
  showWish: {
    type: Boolean,
    default: false
  }
});

// 定义响应式数据
const dialogVisible = ref(props.showWish);

// 监听props变化
watch(() => props.showWish, (newVal) => {
  dialogVisible.value = newVal;
});

// 关闭弹窗方法
const wishClick = () => {
  dialogVisible.value = !dialogVisible.value;
};
</script>

<style lang="scss" scoped>
.wishBody {
  height: 100vh;
  width: 100vw;
  background: transparent;
}

.mask {
  width: 80vw;
  height: 80vh;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -40vw;
  margin-top: -40vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999 !important;
}

.wish {
  position: fixed;
  background: url(./img/微信图片_20230308165735.jpg) no-repeat;
  background-size: 100%;
  width: 60vw;
  height: 60vh;
  top: 50%;
  left: 50%;
  margin-top: -30vh;
  margin-left: -30vw;
  padding: 5vh;

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .left {
      position: relative;
      width: 45%;
      background: url(./img/content_bg.jpg) no-repeat;
      background-size: 100% 100%;
      display: flex;
      overflow-y: auto;
      flex-direction: column;
      //滚动条
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;

      /* IE 10+ */
      ::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
      }

      // align-items: center;
      .nickname {
        margin-top: 10px;
        text-indent: 1em;

        span {
          color: rgb(0, 110, 184);
          margin-left: 6px;
          font-weight: 600;
        }
      }

      .title {
        align-self: center;
        font-family: Hannotate SC;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 5px;
        color: rgb(9, 189, 212);
      }

      .time {
        align-self: flex-end;
        margin-right: 2vw;
        font-size: 12px;
      }

      .content {
        text-indent: 3em;
        margin-bottom: 200px;
      }

    }

    .right {
      width: 45%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }

  }

  // .title:before {
  //   content: '祝福您';
  //   // top: -4px;
  //   // margin-left: -4px;
  //   color: transparent;
  //   text-shadow: 1px 1px 3px hsl(200, 75%, 75%);
  //   opacity: .4
  // }
  .cancel {
    height: 40px;
    width: 40px;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    top: -50px;
    right: -20px;
    color: #fff;
  }

  .cancel:hover {
    background-color: #37addb;

    cursor: pointer;
  }

  .wishPng {
    position: absolute;

    img {
      width: 80px;
      height: 100px;
    }
  }
}
</style>